<template>
  <n-layout has-sider position="absolute">
    <n-layout-sider 
      :native-scrollbar="false" 
      :collapsed-width="0" 
      :width="120" 
      show-trigger="arrow-circle"
      >
      <n-anchor
        class="h-full"
        type="block"
        :bound="35"
        :show-rail="false"
        ignore-gap>
        <n-anchor-link v-for="gua in $data.gua64"
          :title="gua.name"
          class="mr-10px"
          :class="{ 'n-anchor-link--active': currentGua?.binary === gua.binary }"
          @click="handleGuaChange(gua.binary)"
          >
        </n-anchor-link>
      </n-anchor>
    </n-layout-sider>
    <n-layout-content v-if="currentGua" :native-scrollbar="false" class="p-5 pt-0">
      <n-flex 
        justify="space-between"
        align="center"
        class="m-10 mt-0"
        :wrap="false">
        <n-button secondary strong
          @click="handleGuaChange(currentGua.zhouYiNo === 1 ? 64 : currentGua.zhouYiNo - 1)">
          上一卦
        </n-button>
        <n-h2 class="text-center flex-1">
          第{{ currentGua?.zhouYiNo }}卦 - {{ currentGua?.name }}（{{ currentGua?.guaPinYin }}）
        </n-h2>
        <n-button secondary strong
          @click="handleGuaChange(currentGua.zhouYiNo === 64 ? 1 : currentGua.zhouYiNo + 1)">
          下一卦
        </n-button>
      </n-flex>

      <n-flex>
        <div class="mx-10 flex-1">
          <n-h3>{{ currentGua.info }}</n-h3>
          <n-h5>{{ currentGua.tuan }}</n-h5>
          <n-h5>{{ currentGua.xiang }}</n-h5>
        </div>
      </n-flex>
      <div class="m-20px">
        <n-table :single-line="false">
          <tbody>
            <tr v-for="item in currentGua.yaoList">
              <td>{{ item.yao }}</td>
              <td>{{ item.xiang }}</td>
            </tr>
          </tbody>
        </n-table>
      </div>
      
      <n-flex class="mx-10 mt-10" :wrap="false">
        <div class="mx-10 flex-1">
          <n-h3 class="text-center">本卦</n-h3>
          <n-h4 class="text-center">
              第{{ currentGua?.zhouYiNo }}卦 - {{ currentGua?.name }}（{{ currentGua?.guaPinYin }}）
          </n-h4>
          <Gua :binary="currentGua.binary" :height="200"></Gua>
        </div>
        <div class="mx-10 flex-1">
          <n-h3 class="text-center">错卦</n-h3>
          <n-h4 class="text-center">
              第{{ cuoGua?.zhouYiNo }}卦 - {{ cuoGua?.name }}（{{ cuoGua?.guaPinYin }}）
          </n-h4>
          <Gua :binary="cuoGua.binary" :height="200"></Gua>
        </div>
        <div class="mx-10 flex-1">
          <n-h3 class="text-center">综卦</n-h3>
          <n-h4 class="text-center">
              第{{ zongGua?.zhouYiNo }}卦 - {{ zongGua?.name }}（{{ zongGua?.guaPinYin }}）
          </n-h4>
          <Gua 
            :height="200"
            :binary="zongGua.binary"
            :bianYaoList="getBianYao(currentGua.binary, zongGua?.binary)">
          </Gua>
        </div>
      </n-flex>

      <n-flex class="mx-10 mt-10" :wrap="false">
        <div class="mx-10 flex-1">
          <n-h3 class="text-center">复卦</n-h3>
          <n-h4 class="text-center">
              第{{ fuGua?.zhouYiNo }}卦 - {{ fuGua?.name }}（{{ fuGua?.guaPinYin }}）
          </n-h4>
          <Gua 
            :height="200"
            :binary="fuGua?.binary" 
            :bianYaoList="getBianYao(currentGua.binary, fuGua?.binary)">
          </Gua>
        </div>
        <div class="mx-10 flex-1">
          <n-h3 class="text-center font-bold">复卦-错卦</n-h3>
          <n-button text class="font-bold mx-auto" size="large" @click="handleGuaClick(fuCuoGua)">
              第{{ fuCuoGua?.zhouYiNo }}卦 - {{ fuCuoGua?.name }}（{{ fuCuoGua?.guaPinYin }}）
          </n-button>
          <Gua 
            :height="200"
            :binary="fuCuoGua?.binary" 
            :bianYaoList="getBianYao(currentGua.binary, fuCuoGua?.binary)">
          </Gua>
        </div>
        <div class="mx-10 flex-1">
          <n-h3 class="text-center">复卦-综卦</n-h3>
          <n-h4 class="text-center">
              第{{ fuZongGua?.zhouYiNo }}卦 - {{ fuZongGua?.name }}（{{ fuZongGua?.guaPinYin }}）
          </n-h4>
          <Gua 
            :height="200"
            :binary="fuZongGua?.binary" 
            :bianYaoList="getBianYao(currentGua.binary, fuZongGua?.binary)">
          </Gua>
        </div>
      </n-flex>
      <n-flex justify="space-between" class="m-10">
        <n-button text @click="handleGuaChange(currentGua.zhouYiNo === 1 ? 64 : currentGua.zhouYiNo - 1)">上一卦</n-button>
        <n-button text @click="handleGuaChange(currentGua.zhouYiNo === 64 ? 1 : currentGua.zhouYiNo + 1)">下一卦</n-button>
      </n-flex>
    </n-layout-content>
  </n-layout>
</template>

<script setup>
import Gua from '@/components/Gua.vue'
import hotkeys from 'hotkeys-js';
import { getCuoGua, getZongGua, getFuGua, getBianYao, findByBinary, findByNo } from '@/utils/dataPlus.js'

const $data = window.$data
const currentGua = ref(undefined)
const currentRoute = useRoute()

onMounted(()=> {
  handleGuaChange(currentRoute.params?.binary)

  hotkeys('left', function (event, handler) {
    event.preventDefault();
    handleGuaChange(currentGua.value.zhouYiNo - 1)
  });
  hotkeys('right', function (event, handler) {
    event.preventDefault();
    handleGuaChange(currentGua.value.zhouYiNo + 1)
  });
})

onUnmounted(() => {
  hotkeys.unbind('left');
  hotkeys.unbind('right');
})

const handleGuaChange = (binaryOrNo) => {
  binaryOrNo = binaryOrNo || '111111'
  currentGua.value = findByBinary(binaryOrNo) || findByNo(binaryOrNo)
}

const cuoGua = computed(() => getCuoGua(currentGua.value?.binary))
const zongGua = computed(() => getZongGua(currentGua.value?.binary))
const fuGua = computed(() => getFuGua(currentGua.value?.binary))
const fuCuoGua = computed(() => getCuoGua(fuGua.value?.binary))
const fuZongGua = computed(() => getZongGua(fuGua.value?.binary))

const handleGuaClick = (gua) => {
  $global.router.push(`/zhouyi/detail/${gua.binary}`)
}

</script>